@import 'scss-imports/variables';
@import 'mixins/layout';

.actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;

  @media (max-width: $breakpoint-sm) {
    display: block;
  }

  .search-container {
    column-gap: 12px;
    display: flex;
    flex: 1;

    @media (max-width: $breakpoint-singlecolumn) {
      width: 100%;
    }

    @media (max-width: $breakpoint-sm) {
      display: block;
    }

    .search-button-wrapper {
      display: flex;
      gap: 8px;
      justify-content: flex-end;

      @media (max-width: $breakpoint-sm) {
        margin-top: 8px;
      }
    }

    .search-input {
      @media (min-width: $breakpoint-sm) {
        max-width: 90%;
      }

      width: 100%;
    }
  }
}
